<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Url</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
    // 前端向接口（后端向我们暴露的数据接口）请求，动态修改界面的功能
    // Github user接口地址
    const BASE_URL = "https://api.github.com/users/" 
    const users = ['shunwuyu', 'wesbos', 'stolinski']
    const oBody = document.querySelector('tbody')
    // 计数循环 
    // for (let i =0; i < users.length; i++) {
    //     users[i]
    // }
    // es6 for  of 可读性更好 不要那个i
    for (let user of users ) {
        // console.log(user)
        const api_url = `${BASE_URL}${user}`
        fetch(api_url)
            .then(res => res.json())
            .then(data => {
                
                const { name, avatar_url, html_url, id} = data
                if (!name) {
                    console.log('出错了')
                    return;
                }

                oBody.innerHTML += `
                    <tr>
                        <td>${id}</td>
                        <td><a href="${html_url}" target="_blank">${name}</a></td>
                        <td><img src="${avatar_url}" alt=""></td>
                    </tr>
                `
            })
    }

    // const shunwuURL = `${BASE_URL}shunwuyu`
    // 
    // fetch(shunwuURL)
    //     .then(res => res.json())
    //     .then(data => {
    //         // console.log(data)
    //         const { name, avatar_url, html_url, id} = data
    //         // const name = data.name
    //         // const avatar = data.avatar_url
    //         // const url = data.html_url
    //         // console.log(name, avatar_url, url)
    //         oBody.innerHTML += `
    //             <tr>
    //                 <td>${id}</td>
    //                 <td><a href="${html_url}" target="_blank">${name}</a></td>
    //                 <td><img src="${avatar_url}" alt=""></td>
    //             </tr>
    //         `
    //     })    

    </script>
</body>
</html>